<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    <style>
        #div1{
            height: 100px;
            width: 100px;
            background: grey;
        }
    </style>
    <!-- 本章主要包括 -->
    <!-- 获取非行间样式的办法 -->
    <!-- 数组-->
    <script>
        //=====================================================================
        // 获取非行间样式的办法   (因为需要演示style标签所以分p)
        window.onload = function () {
            let ele = document.getElementById('div1');
            //getComputedStyle:获取计算后的样式;此方法不适用于IE Opera,如是ie则需要使用ele.currentStyle,反正我是没试出来...
            console.log(window.getComputedStyle(ele, null).background);

            //补充,background属于复合样式,获取出来的不一定是单一的结果
            console.log(typeof window.getComputedStyle(ele, null)['background']);   //string
            //但width这种则是单一样式
            console.log(window.getComputedStyle(ele, null)['width']);       //100px
            //他们返回的结果是string,不是数组
        };


        //=====================================================================
        //数组和数组的一些方法
        let arr = [1,2,3];
        console.log(arr.length);    //3
        arr.length = 0 ;    //数组会被清空,据说是可利用的bug;   在java中不可以,因为数组长度是final

        //数组中的方法
        //push添加到尾部; pop,抛出尾部; shift,抛出头部; unshift,添加到头部
        arr.push(1,2,3);
        console.log('arr:',arr);    //1,2,3
        console.log('pop:',arr.pop());
        console.log('arr:',arr);    //1,2
        console.log('shift',arr.shift());
        console.log('arr:',arr);    //2
        console.log(arr.unshift(0, 1)); //会返回数组长度3
        console.log('arr:',arr);    //0,1,2

        //splice 拼接
        arr.splice(1,1,9,8,7);  //将第1位(初始值为0)后长度1之内的元素,替换为9,8,7,再与之后的原来数组进行拼接
        console.log('arr-splice:',arr); //0,9,8,7,2
        //也可以只添加2个参数来抹除目标元素

        //concat 连接2个数组
        let arr2 = [10,11,12];
        console.log(arr.concat(arr2));  //[0, 9, 8, 7, 2, 10, 11, 12]
        let arr3 = [...arr,...arr2];    //用新的办法也可以
        console.log(arr3);

        //join 连接数组的各个元素
        console.log('arr-join:',arr.join('***'));   //0***9***8***7***2

        //sort 排序
        let strArr = ['c','z','a','d',];                //可以根据字母来排序
        console.log('arr-sort:',strArr.sort());         //["a", "c", "d", "z"]
        //当需要排序数字时需要重写排序的方法,否则会出现1,11,2,21
        console.log('arr-sort:',arr3.sort(function (n1, n2) {
            return n1 - n2;
        }));


    </script>
</head>

<body>

<div id="div1"></div>

</body>
</html>